import React from 'react';
import {Layout, Menu} from 'antd';
import {MenuFoldOutlined,} from '@ant-design/icons';
import {useRecoilValue} from "recoil";
import {userInfoState} from "../../store/user";

const {Header} = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

export interface HeaderCustomProps {
    toggle: () => void;
}

const HeaderCustom = (props: HeaderCustomProps) => {
    const {toggle} = props;
    const userInfo = useRecoilValue(userInfoState);

    return (
        <Header style={{background: "#fff"}}>
            <MenuFoldOutlined onClick={toggle}/>
            <Menu
                mode="horizontal"
                style={{lineHeight: '64px', float: 'right'}}
            >
                <SubMenu
                    key="user"
                    title={
                        <span>
                            <img src={userInfo?.avatar} alt="用户头像"/>
                        </span>
                    }
                >
                    <MenuItemGroup title="用户中心">
                        <Menu.Item key="username">
                            <span>你好 - {userInfo?.username}</span>
                        </Menu.Item>
                        <Menu.Item key="userinfo">
                            <span>个人信息</span>
                        </Menu.Item>
                        <Menu.Item key="login">
                            <span>退出登录</span>
                        </Menu.Item>
                    </MenuItemGroup>
                    <MenuItemGroup title="设置中心">
                        <Menu.Item key="personal-setting">
                            <span>个人设置</span>
                        </Menu.Item>
                        <Menu.Item key="system-setting">
                            <span>系统设置</span>
                        </Menu.Item>
                    </MenuItemGroup>
                </SubMenu>
            </Menu>
        </Header>
    );
};

export default HeaderCustom;
